import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App.tsx'; 
import reportWebVitals from './reportWebVitals';
import { registerMicroApps, start } from 'qiankun';


// 主应用和子应用之间的通信案例
// import { initGlobalState, MicroAppStateActions } from 'qiankun';
// // import { BrowserRouter } from 'react-router-dom';
// const state = { nickname: '阿帆帆' }
// // 初始化 state
// // @ts-ignore
// const actions: MicroAppStateActions = initGlobalState(state);
// actions.onGlobalStateChange((state, prev) => {
//   // state: 变更后的状态; prev 变更前的状态
//   console.log(state, prev);
// });
// // actions.setGlobalState(state);
// setTimeout(() => {
//   actions.setGlobalState({...state, age: 19});
// }, 2000)
// actions.offGlobalStateChange();

registerMicroApps(
  [
    {
      name: 'micro-app1', // 必选，微应用的名称，微应用之间必须确保唯一
      entry: '//localhost:3011', // 必选，微应用的入口
      container: '#micro-app1', // 必选，微应用的容器节点的选择器或者 Element 实例。如container: '#root' 或 container: document.querySelector('#root')。
      activeRule: '/micro-app1', // 必选，微应用的激活规则
      props: {
        nickName: '阿帆帆',
        age: 18
      }
    },
    {
      name: 'micro-app2',
      entry: '//localhost:3012',
      container: '#micro-app2',
      activeRule: '/micro-app2',
      props: {
        nickName: '阿帆帆',
        age: 18
      }
    },
    {
      name: 'qiankun-micro-vue3-app3',
      entry: '//localhost:3013',
      container: '#micro-app3',
      activeRule: '/micro-app3',
      props: {
        nickName: '阿帆帆',
        age: 19
      }
    },
  ],
  {
    beforeLoad: [async app => console.log('before load', app.name)],
    beforeMount: [async app => console.log('before mount', app.name)],
    afterMount: [async app => console.log('after mount', app.name)],
  },
);

start();

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
      <App />
  </React.StrictMode>
);
reportWebVitals();
